<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>用HTML片段来插入新元素</title>
        <meta name="auther" content="wangjiale"/>
        <meta name="description" content="A simper example"/>
    </head>
    <body>
        <table border="1">
            <thead><tr><th>Fruit</th><th>Color</th></tr></thead>
            <tbody id="fruitBody">
                <tr id="targetrow"><td>Placeholder</td></tr>
            </tbody>
        </table>
        <p>
            <button id="ab">After Begin</button>
            <button id="ae">After End</button>
            <button id="bb">Before Begin</button>
            <button id="be">Before End</button>
        </p>
        <script>
            var target=document.getElementById("targetrow");
            var buttons=document.getElementsByTagName("button");
            for (var i=0;i<buttons.length;i++){
                buttons[i].onclick=handleButtonPress;
            }
            function handleButtonPress(e){
                if(e.target.id=="ab"){
                    target.insertAdjacentHTML("afterbegin","<td>After Begin</td>");
                }else if(e.target.id=="be"){
                    target.insertAdjacentHTML("beforeend","<td>Before End</td>");
                }else if(e.target.id=="ae"){
                    target.insertAdjacentHTML("afterend",
                    "<tr><td colspan='2'>After End</td></tr>");
                }else{
                    target.insertAdjacentHTML("beforebegin",
                    "<tr><td colspan='2'>Before Begin</td></tr>");
                }
            }
        </script>
    </body>
</html>